<template>
	<view>

		<uv-cell-group>
			<uv-cell>
				<!-- 自定义左侧标题 -->
				<template v-slot:title>
				</template>
				<!-- 自定义左侧标题下面的内容 -->
				<template v-slot:label>
					
				</template>
				<!-- 自定义右侧值 -->
				<template v-slot:value>
					<view>
						<uv-search placeholder="用户ID" v-model="userId" :clearabled="true" :showAction="false" borderColor="#55aaff" ></uv-search>
					</view>
					<view>
						<uv-search placeholder="请输入搜索单车编号" v-model="bikeId" :clearabled="true" borderColor="#55aaff" @custom="searchRecords()"></uv-search>
					</view>
				</template>
				<!-- 自定义左侧图标 -->
				<template v-slot:icon>
					<uv-icon size="50rpx" name="search"></uv-icon>
				</template>
				<!-- 自定义右侧图标 -->
				<template v-slot:right-icon>
					
					
					
				</template>
			</uv-cell>
		</uv-cell-group>
		


		<zb-table :show-header="true" :columns="column" :stripe="true" :fit="true" @rowClick="rowClick"
			@toggleRowSelection="toggleRowSelection" @toggleAllSelection="toggleAllSelection" :border="true"
			@edit="buttonEdit" @dele="dele" :data="recordsData"></zb-table>
		<uni-pagination :current="current" :total="total" title="标题文字" :show-icon="true" @change="changePage" />
		<view class="btn-view">
			<view>
				<text class="example-info"
					style="white-space: nowrap;">当前页：{{ current }}，数据总量：{{ total }}条，每页数据：{{ pageSize }}</text>
			</view>
			<view class="btn-flex">
				<button class="button word-btn" hover-class="word-btn--hover" :hover-start-time="20"
					:hover-stay-time="70" @click="add"><text class="word-btn-white">增加10条数据</text></button>
				<button class="button" type="default" @click="reset">重置数据</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				apiUrl: '',
				setToken: function() {},
				header: {},
				recordsData: [],
				/* 搜索 */
				userId: '',
				bikeId: '',
				/* 分页 */
				current: 1,
				total: 10,
				pageSize: 10,
				/* 表格 */
				column: [
					// {
					// 	type: 'selection',
					// 	fixed: true,
					// },
					{
						name: 'recordId',
						label: '订单号',
						sorter: true,
						fixed: false,
						emptyString: '--'
					},
					{
						name: 'userId',
						label: '用户ID',
						sorter: true
					},
					{
						name: 'bikeId',
						label: '单车编号',
						sorter: true
					},
					{
						name: 'startTime',
						label: '起始时间',
						sorter: true,
						
					},
					{
						name: 'startLatitude',
						label: '起始经度'
					},
					{
						name: 'startLongitude',
						label: '起始维度'
					},
					{
						name: 'endTime',
						label: '结束时间',
						sorter: true,
					},
					{
						name: 'endLatitude',
						label: '结束经度'
					},
					{
						name: 'endLongitude',
						label: '结束维度'
					},
					{
						name: 'distance',
						label: '骑行距离（km）'
					},
					{
						name: 'duration',
						label: '骑行时长（h）'
						
					},
					// {
					// 	name: 'operation',
					// 	type: 'operation',
					// 	label: '操作',
					// 	renders: [{
					// 			name: '编辑',
					// 			func: 'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
					// 		},
					// 		{
					// 			name: '删除',
					// 			type: 'warn',
					// 			func: "dele"
					// 		},
					// 	]
					// },
				],
			}
		},
		mounted() {
			this.apiUrl = getApp().globalData.apiUrl;
			this.user = uni.getStorageSync('user');
			// setToken是设置header放入token的函数
			this.setToken = getApp().globalData.setToken;
			this.header = this.setToken();
			if (this.user == '' || this.setToken == null) {
				this.getUserTokenFail();
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/user/login'
					});
				}, 1000);
			}
			this.getAllRecords();
		},
		methods: {
			onPullDownRefresh() {
				console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			getUserTokenFail() {
				this.$refs.notify.error('获取信息错误，请重新登录！');
			},
			getAllRecords() {
				const backendURL = this.apiUrl + "/record/list" + "?pageNum=" + this.current + "&pageSize=" + this
					.pageSize;
				console.log(backendURL);
				let header = this.setToken();
				let satoken = header.satoken;
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					header: {
						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						console.log(res.data);
						this.recordsData = res.data.data.rows;
						this.total = res.data.data.total;

					},
					fail: function(res) {
						console.log('错误', res);
					}
				});
			},
			/* 搜索 */
			custom() {
				this.searchRecords();
			},
			searchRecords() {
				const backendURL = this.apiUrl + "/record/listByUserIdOrBikeId" + "?pageNum=" + this.current + "&pageSize=" + this
					.pageSize;
				let SearchRecordsDto = {
					userId: this.userId,
					bikeId: this.bikeId
				}
				if(this.userId==''&&this.bikeId=='')
				{
					this.getAllRecords();
					return;
				}
				console.log(SearchRecordsDto.userId);
				console.log(SearchRecordsDto.bikeId);
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					data: SearchRecordsDto,
					header: this.header,
					success: (res) => {
						console.log(res.data);
						this.recordsData = res.data.data.rows;
						this.total = res.data.data.total;
					},
					fail: function(res) {
					}
				});
			},
			/* 分页工具 */
			add() {
				this.pageSize += 10;
				this.getAllRecords();
			},
			reset() {
				this.pageSize = 10;
				this.current = 1;
				this.getAllRecords();
			},
			changePage(e) {
				console.log(e);
				this.current = e.current;
				this.getAllRecords();
			},
		}
	}
</script>

<style>
	/* 分页 */
	.btn-view {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px;
		text-align: center;
		background-color: #fff;
		justify-content: center;
		align-items: center;
	}

	.btn-flex {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.button {
		margin: 20px;
		width: 150px;
		font-size: 14px;
		color: #333;
	}
</style>